<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ include file="/website/common/base.jsp" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>${webname }-我的积分</title>
    <%@ include file="/website/common/common.jsp" %>
    <link href="${webctx }/css/manage.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${ctx}/plugins/plupload2/plupload.full.min.js"></script>
</head>

<body>
<%@ include file="/website/common/top.jsp" %>
<%@ include file="/website/common/head.jsp" %>
<%@ include file="/website/common/menu.jsp" %>

<div class="warp-body" style="background-color: #fff;">
    <div style="width: 100%; height: 3px; background-color: #0daeff;"></div>
    <div class="inner clearfix">
        <div class="left-main">
            <div class="left-inner">
                <%@ include file="/website/user/left.jsp" %>
            </div>
        </div>
        <div class="right-main right-cont">
            <div class="right-inner">
                <div class="right-title-n">我的积分 <a class="fr" href="/info/helpinfo?id=25">积分使用规则？如何获取更多积分？</a></div>
                <div class="msg-list">
                    <ul>
                        <li>
                            <p>我的积分</p>
                            <p class="col-red" id="integralSum"><fmt:formatNumber value="${myIntegral.integral + myIntegral.ly_integral}" type="number"></fmt:formatNumber></p>
                        </li>
                        <li class="li-center">
                            <p><span>即将过期 <i>(${myIntegral.now_year}/12/31)</i></span></p>
                            <p class="col-red" id="ly_integral"><fmt:formatNumber value="${myIntegral.ly_integral}" type="number"></fmt:formatNumber></p>
                        </li>
                        <li>
                            <p>待发放积分</p>
                            <p class="col-red" id="store_integral"><fmt:formatNumber value="${myIntegral.store_integral == null ? 0 : myIntegral.store_integral}" type="number"></fmt:formatNumber></p>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </div>
                <div class="integral-sub">
                    <div class="sub-nav" id="sub-nav" status="0">
                        <ul>
                            <li val="0" id="integral0">全部明细</li>
                            <li val="1" id="integral1">积分收入</li>
                            <li val="2" id="integral2">积分支出</li>
                        </ul>
                        <div class="select fr">
                            <div class="select-txt" id="select-txt" timeType="0">最近三个月积分记录</div>
                            <div class="select-check-txt" id="select-check-txt" style="display: none;">
                                <p val="0">最近三个月积分记录</p>
                                <p val="1">最近六个月积分记录</p>
                                <p val="2">最近一年积分记录</p>
                            </div>
                        </div>
                    </div>
                    <div class="sub-list">
                        <div class="sub-list-title">
                            <ul>
                                <li class="tit-date">日期</li>
                                <li class="tit-sho">收入/支出</li>
                                <li class="tit-num">方式</li>
                                <li class="tit-state">详细说明</li>
                            </ul>
                        </div>
                        <div class="sub-list-con">
                            <c:forEach var="integral" items="${integrals}">
                                <dl>
                                    <dd class="con-time"><fmt:formatDate value="${integral.create_time}" type="date"></fmt:formatDate> </dd>
                                    <c:if test="${integral.integral >= 0}">
                                        <dd class="con-sho col-red">${integral.integral}</dd>
                                    </c:if>
                                    <c:if test="${integral.integral < 0}">
                                        <dd class="con-sho col-blue">${integral.integral}</dd>
                                    </c:if>
                                    <dd class="con-num">
                                    <c:choose>
                                        <c:when test="${integral.type == 0}">
                                            注册
                                        </c:when>
                                        <c:when test="${integral.type == 1}">
                                            签到
                                        </c:when>
                                        <c:when test="${integral.type == 2}">
                                            下单
                                        </c:when>
                                        <c:when test="${integral.type == 3}">
                                            兑换优惠卷
                                        </c:when>
                                    </c:choose>
                                    </dd>
                                    <dd class="con-state">${integral.content}</dd>
                                </dl>
                            </c:forEach>
                        </div>

                        <!-- 分页 -->
                        <div class="sub-paging" id="pagehtml">${pagehtml}</div>
                    </div>
                </div>
                <div class="integral-exchange">
                    <div class="ex-title">积分兑换</div>
                    <ul>

                        <c:forEach var="coupon" items="${couponList}">
                            <c:choose>
                                <c:when test="${coupon.amount > coupon.sales}">
                                    <li>
                                        <div class="ex-text fl">
                                            <p class="text-price">￥<span><fmt:formatNumber value="${coupon.offer_money}" type="number"></fmt:formatNumber></span></p>
                                            <p class="txt-msg1">满<fmt:formatNumber value="${coupon.min_money}" type="number"></fmt:formatNumber>元可用</p>
                                            <p class="txt-msg2"><fmt:formatNumber value="${coupon.activity_day}" type="number"></fmt:formatNumber>天内有效</p>
                                        </div>
                                        <div class="ex-btn fl">
                                            <p class="btn-txt-msg"><fmt:formatNumber value="${coupon.offer_money * 100}" type="number"></fmt:formatNumber>积分可兑</p>
                                            <a class="btn-a"  href="javascript:;" onclick="exchangeCoupon(${coupon.id},${coupon.offer_money * 100})">立即兑换</a>
                                        </div>
                                    </li>
                                </c:when>
                                <c:otherwise>
                                    <li>
                                        <div class="ex-text fl">
                                            <p class="text-price">￥<span><fmt:formatNumber value="${coupon.offer_money}" type="number"></fmt:formatNumber></span></p>
                                            <p class="txt-msg1">满<fmt:formatNumber value="${coupon.min_money}" type="number"></fmt:formatNumber>元可用</p>
                                            <p class="txt-msg2"><fmt:formatNumber value="${coupon.activity_day}" type="number"></fmt:formatNumber>天内有效</p>
                                        </div>
                                        <div class="ex-btn have-been-used fl">
                                            <p class="btn-txt-msg"><fmt:formatNumber value="${coupon.offer_money * 100}" type="number"></fmt:formatNumber>积分可兑</p>
                                            <a class="btn-a" href="javascript:;">已兑完</a>
                                        </div>
                                    </li>
                                </c:otherwise>
                            </c:choose>


                        </c:forEach>

                        <%--<li>
                            <div class="ex-text fl">
                                <p class="text-price">￥<span>999</span></p>
                                <p class="txt-msg1">满1000元可用</p>
                                <p class="txt-msg2">30天内有效</p>
                            </div>
                            <div class="ex-btn fl">
                                <p class="btn-txt-msg">5000000积分可兑</p>
                                <a class="btn-a" href="javascript:;">立即兑换</a>
                            </div>
                        </li>--%>

                    </ul>
                    <div class="clear"></div>
                </div>

                <div class="integral-explain">
                    <div class="ex-title">积分使用常见问题</div>
                    <div class="ex-con">
                        <ul>
                            <li>
                                <p class="ex-item-tit">1.积分的有效期</p>
                                <p class="ex-text">最长2年，最短1年，即从获得积分开始至次年年底，逾期自动作废（如若交易在积分有效期之外发生退款，该部分积分不予退还）</p>
                            </li>
                            <li>
                                <p>1.积分的有效期</p>
                                <p class="ex-text">最长2年，最短1年，即从获得积分开始至次年年底，逾期自动作废（如若交易在积分有效期之外发生退款，该部分积分不予退还）</p>
                            </li>
                            <li>
                                <p>1.积分的有效期</p>
                                <p class="ex-text">最长2年，最短1年，即从获得积分开始至次年年底，逾期自动作废（如若交易在积分有效期之外发生退款，该部分积分不予退还）</p>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
<div class="alert-qt"
     style="
         display: none;
         z-index:33;
         position: fixed;
    left: 50%;
    top: 40%;
    padding: 12px 34px;
    margin-left: -140px;
    background-color: #000;
    border: 1px solid #fff;
    font-size: 16px;
    color: #fff;
    border-radius: 25px;">您当前积分不足以兑换该优惠券
</div>

<%@ include file="/website/common/foot.jsp" %>
</body>
</html>
<script>
    var uploader;
    $(function () {
        var cid = "integral" + ${status};
        setLeftCur(cid);
        $("#sub-nav").attr("status",${status});
        var timeText = $(".select-check-txt p[val='${timeType}']").text();
        $("#select-txt").attr("timeType",${timeType});
        $("#select-txt").text(timeText);

    })

    function gopage(n) {
        window.location.href = ctx + "/user/integral?pno=" + n
    }
    function topageclick() {
        if ($("[name='topagenum']").val() != "")
            window.location.href = ctx + "/user/integral?pno=" + $("[name='topagenum']").val();
    }

    $("#select-txt").click(function (event) {
        $("#select-check-txt").toggle();
        event.stopPropagation();
    });
    $("#select-check-txt p").click(function (event) {
        $("#select-check-txt").hide();
        var txt = $(this).text();
        $("#select-txt").text(txt);
        var timeType = $(this).attr("val");
        $("#select-txt").attr("timeType",timeType);
        getIntegralDetails(1);
        event.stopPropagation();
    });
    $(document).click(function () {
        $("#select-check-txt").hide();
    })
    $(".sub-nav li").click(function () {
        $(this).addClass("cur").siblings("li").removeClass("cur");
        var status = $(this).attr("val");
        $("#sub-nav").attr("status", status);
        getIntegralDetails(1);
    })
    
    function getIntegralDetails(pageno) {
        var status = $("#sub-nav").attr("status");
        var timeType = $("#select-txt").attr("timeType");
        $w.httpRequest({
            url : "${ctx}/user/integralDetails",
            data : {"status" : status, "timeType" : timeType, "pno" : pageno},
            ok : function (ret) {
                $("#pagehtml").html(ret.Data.pagehtml);
                setIntegralDetails(ret.Data.integrals);
            }
        });
    }
    function setIntegralDetails(data) {
        $(".sub-list-con").text("");
        for(var i = 0 ; i < data.length ; i++) {
            var integral = data[i];
            var integralHtml = "";
            var time  = integral.create_time.substr(0,11).replace(/[-]/g,"/");
            var type = integral.type;
            switch (type) {
                case 0 :
                    type = "注册";
                    break;
                case 1 :
                    type = "签到";
                    break;
                case 2 :
                    type = "下单";
                    break;
                case 3 :
                    type = "兑换优惠卷";
                    break;
                default :
                    break;
            }
            integralHtml += '<dl><dd class="con-time">' + time + '</dd>';
            if(integral.integral >= 0) {
                integralHtml += '<dd class="con-sho col-red">';
            }else {
                integralHtml += '<dd class="con-sho col-blue">';
            }
            integralHtml += integral.integral + '</dd><dd class="con-num">' + type + '</dd><dd class="con-state">' +
                            integral.content + '</dd></dl>';
            $(".sub-list-con").append(integralHtml);
        }
    }
    function gopage(n) {
        query(n);
    }
    function query(n) {
        var status = $("#sub-nav").attr("status");
        var timeType = $("#select-txt").attr("timeType");

        var url = ctx + "/user/integral?pno=" + n;
        url += "&status=" + status;
        url += "&timeType=" + timeType;
        window.location.href = url;
    }
    
    function exchangeCoupon(couponid, integral) {
        var status = $("#sub-nav").attr("status");
        var timeType = $("#select-txt").attr("timeType");
        var myInte =  $("#integralSum").text();
        console.log(myInte);
        if(integral > myInte) {
            $(".alert-qt").html("您当前积分不足以兑换该优惠券");
            alert_qt();
        }else {
            //alert("兑换优惠券成功");
            $w.httpRequest({
                url : "${ctx}/user/exchangeCoupon",
                data : {"status" : status, "timeType" : timeType, "couponid" : couponid},
                ok : function (ret) {
                    var myIntegral = ret.Data.myIntegral;
                    var inteSum = myIntegral.integral + myIntegral.ly_integral;
                    $("#integralSum").text(inteSum);
                    $("#ly_integral").text(myIntegral.ly_integral);
                    $("#store_integral").text(myIntegral.store_integral);
                    $("#pagehtml").html(ret.Data.pagehtml);
                    setIntegralDetails(ret.Data.integrals);
                    $(".alert-qt").html(ret.Data.status);
                    alert_qt();
                }
            });
        }

    }
    function alert_qt() {
        clearTimeout(t);
        $(".alert-qt").show();
        var t = setTimeout(function () {
            $(".alert-qt").hide();
        },2000);
    }

</script>
